#{extends 'main.html' /} #{set title:'Organization' /} #{set 'moreStyles'}
<link rel="stylesheet" href="@{'/public/stylesheets/forms.css'}">

<link rel="stylesheet" href="@{'/public/stylesheets/forms.css'}">
#{/set}

<script type="text/javascript">
	$(document).ready(
			function() {
				$('.left, .content input, .content textarea, .content select')
						.focus(function() {
							$(this).parents('.row').addClass("over");
						}).blur(function() {
							$(this).parents('.row').removeClass("over");
						});
			});
</script>



<div id=main>
	<h3>Create an Organization</h3>

	<form name=organization action="@{Organizations.orgCreated()}"
		method="POST" enctype="multipart/form-data">



		<div class="content">
			<div class="row">
				<div class="left">Organization Name</div>
				<div class="right">
					<input name=o.name type="text" size="26" required
						autofocus="autofocus" />
				</div>
				<div class="clear"></div>
			</div>

			<div class="row">
				<div class="left">Organization Email</div>
				<div class="right">
					<input name=o.email type="Email" size="26" required />
				</div>
				<div class="clear"></div>
			</div>

			<div class="row">
				<div class="left">Address</div>
				<div class="right">
					<input name=o.address type="text" size="26" required />
				</div>
				<div class="clear"></div>
			</div>

			<div class="row">
				<div class="left">Description</div>
				<div class="right">
					<textarea rows="10" cols="50" name="o.description" required></textarea>
				</div>
				<div class="clear"></div>
			</div>

			<div class="row">
				<div class="left">Type</div>
				<div class="right">
					<input type="radio" name=o.type value="Public" />Public<br /> <input
						type="radio" name=o.type value="Private" />Private<br /> <input
						type="radio" name=o.type value="Closed Organization" />Closed
					Organization
				</div>
				<div class="clear"></div>
			</div>


			<div class="row">
				<div class="left">Upload a Photo</div>
				<div class="right">
					<input type="file" id="photo" name=o.picture />
				</div>
				<div class="clear"></div>
			</div>

			<div class="row">
				<div class="left">Category</div>
				<div class="right">
					<select name=o.category>
						<option value="Agriculture, forestry and fishing">Agriculture,
							forest and fishing</option>
						<option value="Construction">Construction</option>
						<option value="Education">Education</option>
						<option value="Health">Health</option>
						<option value="IT and telecommunications services">IT and
							telecommunications services</option>
						<option value="Media and creative services">Media and
							creative services</option>
						<option value="Personal services">Personal services</option>
						<option value="Professional and business services">Professional
							and business services</option>
						<option value="Retail">Retail</option>
						<option value="Manufacturing">Manufacturing</option>
						<option value="Other">Other</option>

					</select>
				</div>
				<div class="clear"></div>
			</div>

<input type="checkbox" value=o.tagging name="o.tagging"/> Allow tagging <br />

			<div class="row">
				<div class="left">Creation Date</div>
				<div class="right">
					<script type="text/javascript">
					<!--
						var currentTime = new Date()
						var month = currentTime.getMonth() + 1
						var day = currentTime.getDate()
						var year = currentTime.getFullYear()
						document.write(month + "/" + day + "/" + year)
					</script>
				</div>
				<div class="clear"></div>
			</div>

			<div class="row">
				<div class="left"></div>
				<div class="right">
					<input type="image" src="@{'/public/images/submit2.png'}"
						alt="Submit" />
				</div>
				<div class="clear"></div>
			</div>


		</div>
	#{if flash.error}
		<p style="color:#c00">
		${flash.error}
		</p>
		#{/if}
		
		



	</form>
</div>



